<template>
<div>
  <el-row>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="search.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="search.region" placeholder="活动区域" style="width: 240px">
          <el-option label="上海" value="上海"></el-option>
          <el-option label="北京" value="北京"></el-option>
          <el-option label="合肥" value="合肥"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-button type="primary" size="small" @click="saveRecord">新增</el-button>
    <el-button type="primary" size="small" @click="bathDelete">批量删除</el-button>
    <el-button type="primary" size="small" @click="templateDown">模板</el-button>
    <el-button type="primary" size="small" @click="importData">导入</el-button>
    <el-button type="primary" size="small" @click="exportData">导出</el-button>
  </el-row>
  <el-row>
    <el-table :data="devices"  :stripe="true" :border="true" :highlight-current-row ="true" style="width: 100%">
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"  width="180"> </el-table-column>
      <el-table-column prop="region" label="区域"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template v-slot:default="scope" >
          <el-button @click="queryRecord(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="editRecord(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="pageSizesChange"
        @current-change="currentPageChange"
        :current-page="page.currentPage" :layout="$store.state.page.layout"
        :page-sizes="$store.state.page.pageSizes" :page-size="page.pageSize" :total="400">
    </el-pagination>
  </el-row>

  <el-dialog title="提示" v-model="dialog.visible"  width="30%" :before-close="dialogClose" >
   <template v-slot:title >
     <div class="dialog-title">
       <span>详细信息</span>
     </div>
   </template>
   <template v-slot:default>
     <el-form :model="device" label-width="auto" style="max-width: 600px">
       <el-form-item label="ID">
         <el-input v-model="device.id" />
       </el-form-item>
       <el-form-item label="姓名">
         <el-input v-model="device.name" />
       </el-form-item>
       <el-form-item label="日期">
         <el-input v-model="device.date" />
       </el-form-item>
       <el-form-item label="区域">
         <el-input v-model="device.region" />
       </el-form-item>
       <el-form-item label="地址">
         <el-input v-model="device.address" />
       </el-form-item>
     </el-form>
   </template>
   <template v-slot:footer >
     <div class="dialog-footer" v-show="dialog.btnDisplay">
       <el-button  @click="dialog.visible = false">取 消</el-button>
       <el-button type="primary" @click="saveAndEditRecord()">确 定</el-button>
     </div>
   </template>
  </el-dialog>
</div>
</template>

<script>
import tableData from '@/api/device.json'
import {toRaw} from "vue";
import {page, saveAndEdit} from '@/api/device'
export default {
  name: "Mysql",
  data(){
    return{
      //搜索表单
      search:{
        name: null,
        region: null,
      },
      devices:[],  // 表格数据
      device:{},
      // 分页参数
      page:{
        currentPage: 1,
        pageSize:100,
        total:400,
      },
      dialog:{
        visible:false,
        btnDisplay:true
      }
    }
  },
  created(){
    this.getList()
  },
  methods:{
    // 渲染表格
    getList(){
      page(this.search).then(resp=>{
        this.devices = resp.data
      })
    },
    // 分页相关函数
    pageSizesChange(val) {
      console.log(`每页 ${val} 条`);
      this.getList()
    },
    currentPageChange(val) {
      console.log(`当前页: ${val}`);
      this.getList()
      this.devices = tableData
    },
    queryRecord(record){
      this.dialog.visible = true;
      this.dialog.btnDisplay= false
      this.device = toRaw(record)
    },
    saveAndEditRecord(){
      saveAndEdit(toRaw(this.device)).then(resp=>{
        console.log('响应数据 ：', resp)
      })
      this.dialog.visible = false
      this.dialog.btnDisplay= true

    },
    editRecord(record){
      this.dialog.visible = true
      this.dialog.btnDisplay= true
      this.device = toRaw(record)
    },
    deleteRecord(record,done){
      console.log(record);
      this.$confirm('确认关闭？')
          .then(() => { done();
          }).catch(() => {});
    },
    saveRecord(){
      this.dialog.visible=true
    },
    bathDelete(){

    },
    importData(){

    },
    exportData(){

    },
    templateDown(){

    },
    dialogClose(){
      this.dialog.visible=false
      this.device = {}
    }
  }
}
</script>

<style scoped>

</style>
